import { PureComponent } from 'react';
import { connect } from 'react-redux';

class Writer extends PureComponent {
    render() {
        let { list } = this.props;
        return (
            <div className="writer">
                <div className="title">
                    <span>推荐作者</span>
                    <i className="iconfont icon-change"> 换一批</i>
                </div>
                <ul>
                    {list.map(item => {
                        return (
                            <li className="item flex" key={item.id}>
                                <img src={item.imgUrl} alt="" />
                                <div className="content flex_item">
                                    <span className="name">{item.name}</span>
                                    <p className="tips">{item.tips}</p>
                                </div>
                                <div className="follow">
                                    <i className="iconfont icon-add"></i>关注
                                </div>
                            </li>
                        );
                    })}
                </ul>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        list: state.getIn(['home', 'writerList']),
    };
};

export default connect(mapStateToProps, null)(Writer);
